<template>
  <div class="login-container">
    <div class="login-content">
      <div class="system-title">
        <h1>课程管理系统</h1>
      </div>
      <el-card class="login-box">
        <template #header>
          <div class="card-header">
            <span>{{ isLogin ? "用 &nbsp &nbsp户  &nbsp &nbsp登 &nbsp &nbsp录" : "用&nbsp &nbsp户&nbsp &nbsp注&nbsp &nbsp册" }}</span>
          </div>
        </template>

        <el-form
          ref="formRef"
          :model="formData"
          :rules="rules"
          label-position="top"
          size="large"
        >
          <el-form-item label="用户名" prop="username">
            <el-input
              v-model="formData.username"
              placeholder="请输入用户名"
              prefix-icon="User"
            />
          </el-form-item>

          <el-form-item v-if="!isLogin" label="电子邮箱" prop="email">
            <el-input
              v-model="formData.email"
              placeholder="请输入电子邮箱"
              prefix-icon="Message"
            />
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input
              v-model="formData.password"
              type="password"
              placeholder="请输入密码"
              prefix-icon="Lock"
              show-password
            />
          </el-form-item>
          <div class="btn-container">
            <el-button
              type="primary"
              :loading="loading"
              @click="handleSubmit"
              class="login-btn"
            >
              {{ isLogin ? "登录" : "注册" }}
            </el-button>
            <el-button @click="handleReset" class="login-btn">重置</el-button>
          </div>

          <div class="switch-form">
            <span>{{ isLogin ? "还没有账号？" : "已有账号？" }}</span>
            <el-link
              type="primary"
              :underline="false"
              @click="isLogin = !isLogin"
            >
              {{ isLogin ? "立即注册" : "立即登录" }}
            </el-link>
          </div>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { login, register } from "@/request/request";
import { useRouter } from "vue-router";

const router = useRouter();
const isLogin = ref(true);
const loading = ref(false);
const rememberMe = ref(false);
const formRef = ref(null);

const formData = reactive({
  username: "",
  password: "",
  email: "",
});

const rules = reactive({
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
  ],
  email: [
    { required: true, message: "请输入电子邮箱", trigger: "blur" },
    { type: "email", message: "请输入正确的邮箱地址", trigger: "blur" },
  ],
});

const handleSubmit = async () => {
  if (!formRef.value) return;
  try {
    await formRef.value.validate();
    loading.value = true;
    // 这里添加登录/注册逻辑
    if (isLogin.value) {
      const res = await login(formData);
      //   console.log(res);
      if (res.code == 200) {
        ElMessage.success("登录成功");
        console.log(res.data);
        localStorage.setItem("token", res.data.token);
        localStorage.setItem("userInfo", JSON.stringify(res.data));
        router.push("/dashboard");
      } else {
        ElMessage.error(res.msg);
      }
    } else {
      const res = await register(formData);
      if (res.code == 200) {
        ElMessage.success("注册成功");
        isLogin.value = true;
        formRef.value.resetFields();
      } else {
        ElMessage.error(res.msg);
      }
    }
  } catch (error) {
    console.error("表单验证失败：", error);
  } finally {
    loading.value = false;
  }
};

const handleReset = () => {
  if (formRef.value) {
    formRef.value.resetFields();
  }
  rememberMe.value = false;
};
</script>

<style scoped>
.login-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #e0f7fa 0%, #bbdefb 100%);
  overflow: hidden;
}

.login-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -5%;
}

.system-title {
  text-align: center;
  color: #333;
  margin-bottom: 1rem;
}

.system-title h1 {
  font-size: 3rem;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.system-title p {
  font-size: 1.4rem;
  margin: 0.5rem 0 0;
  opacity: 0.9;
}

.login-box {
  width: 100%;
  max-width: 500px; /* 增加最大宽度，使登录页面更大一些 */
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
  padding: 30px; /* 增加内边距，使内容更宽松 */
  background: #fff; /* 设置背景为白色，颜色淡雅 */
}

.card-header {
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  color: #333;
  padding: 0.75rem 0;
}

.btn-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 30px 0; /* 增加间距，使按钮更显眼 */
}

.login-btn {
  width: 160px;
  height: 40px; /* 增加按钮高度 */
}

.switch-form {
  text-align: center;
  color: #666;
  margin-top: 20px; /* 增加间距，使开关表单更显眼 */
}

:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #dcdfe6 inset;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #1890ff inset;
}

:deep(.el-button--primary) {
  background: linear-gradient(135deg, #81c784 0%, #66bb6a 100%);
  border: none;
  transition: all 0.3s;
}

:deep(.el-button--primary:hover) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 187, 106, 0.3);
}
</style>

